1. Iniciar proyecto por línea de comandos
CreateReactApp: Arranque desarrollo
Si tenemos node.js instalado, ejecutaremos el siguiente comando
npm-crate-react-app nombre_De_mi_proyecto_En_React
Una vez terminada la instalación, la consola nos sugerirá que accedamos desde consola con
cd nombre_De_mi_proyecto_En_React
Además, nos sacará una serie de comandos que ejecutaremos al empezar, y durante las diferentes fases de un desarrollo:
npm start: Nos permite inicializar y compilar para un servidor de desarrollo, y ver los cambios en el navegador a medida que escribimos el código. Como detalle, si nos fijamos en el texto que devuelve la consola, veremos que start-react-app utiliza WebPack por dentro compilar desarrollo y producción.
npm run build: Compila la aplicación para producción.
npm run test: Relacionado con el tema de los testings de interfaces. No abarcaremos esto en este curso.
npm run eject: Elimina las configuraciones y las dependencias por defecto que nos da create-react-app.
ViteJS: Arranque desarrollo
Estos son los comandos que ejecutamos para arrancar una app de React con Vite.js
npm create vite
Si no hemos instalado el módulo con anterioridad, nos lo pedirá. Nos pedirá también el tipo de proyecto que queremos (React, Angular...) y si es con JavaScript o TypeScript.
npm run dev
En create react app hacíamos 'npm start', aquí para arrancar el entrno de desarrollo 'npm run dev'.
2. Snippets React
Para trabajar con React en VSCODE, es interesante instalarse la siguiente extensión:
Esta extensión nos trae la siguiente lista de snippets para React:
Podemos ver la lista en ese enlace, y VSCODE, nos hace el autocompletado con la extensión instalada. Pero es interesante quedarse al menos con estos dos por ir cogiendo agilidad:
imrc
Importa un componente de React haciendo "destructuring".
import React, { Component } from 'react'
rafc
Te saca una arrow function con la estructura básica de un componente.
import React, { Component } from 'react'
3. Librerías/Hooks utilizadas: npm, react y redux
En los contenidos de este curso, hemos trabajado en este orden de dependencias:
Node.js > npm > React > Redux > Redux Toolkit
Todas estos entornos, contienen a su vez infinidad de librerías para diferentes fines. A continuación sacamos un listado de algunas de las que se han utilizado según se redactaeba esta documentación:
Provider
import { Provider } from 'react-redux'
Componente de React Redux. Nos facilita ya un componente Provider que viene de la Context API de React.
React Router DOM - useNavigate
import { useNavigate } from "react-router-dom";
os permite recibir parámetros relativos a las rutas, y useParams sirve para identificar los parámetros que pasaremos por URL (parámetros o segmentos URI).
React Router DOM - BrowserRouter, Routes, Route
import { BrowserRouter, Routes, Route } from "react-router-dom";
Conjunto de hooks utilizados para la gestión de rutas, en un componente principal, como puede ser App.
React Router DOM - Link
import { Link } from "react-router-dom";
Permite utilizar un componente "Link" para vincular a los componentes BrowserRouter, Routes y Route resultando en el compilado como una etiqueta a href=""
React Redux - UseSelector
import { useSelector } from "react-redux";
Nos trae el state global del store. Instanciándolo, podemos sacar lo que necesitemos.
const tasks = useSelector(state => state.tasks)
React Redux - useDispatch
import { useDispatch } from "react-redux";
Sirve para disparar o "despachar" acciones del estado, que estas avisen a los reducers, y estos a Redux para que actualice los estados de la interfaz de usuario.
Npm - uuid
import { useDispatch } from "react-redux";
UUID es una biblioteca de NPM para generar id´s únicos, que podemos pasar al atributo key={}. Se utiliza la v4, que es la última versión, y la solemos importar como un alias "uuid"